<template>
  <div class="background">
    <YihenGlassmorphismCard
      width="80%"
      height="100%"
      yihenStyle="Mobile"
      class="self-introduction-card"
    >
      <div class="self-introduction scrollable-content">
        <h1 class="title">个人简历</h1>
        <section class="resume-section">
          <h2>个人基本信息</h2>
          <div class="info-profile-row">
            <div class="info">
              <ul>
                <li><strong>姓名：</strong>李豪</li>
                <li><strong>性别：</strong>男</li>
                <li><strong>年龄：</strong>23</li>
                <li><strong>邮箱：</strong>1257965244@qq.com</li>
                <li><strong>电话：</strong>19118415578</li>
                <li><strong>所在地：</strong>秦皇岛</li>
              </ul>
            </div>

            <div class="avatar">
              <img class="avatar" src="/assets/profile.jpg" alt="头像" />
            </div>
          </div>
          <div class="profile-icons">
            <yihen-pixel-badge
              :texts="['本科', '湖南理工大学']"
              :isSplited="true"
              :types="['dark', 'primary']"
              width="250px"
            >
            </yihen-pixel-badge>
            <yihen-pixel-badge
              :texts="['硕士', '燕山大学']"
              :isSplited="true"
              :types="['dark', 'success']"
              width="250px"
            >
            </yihen-pixel-badge>
            <a
              href="https://github.com/CszYihen?tab=repositories"
              target="_blank"
              rel="noopener noreferrer"
            >
              <i class="nes-icon github is-medium nes-pointer"></i>
            </a>
            <!-- 可继续添加其他社交icon -->
          </div>
        </section>
        <section class="resume-section">
          <h2>个人技术栈</h2>
          <ul>
            <li>
              <strong>前端：</strong
              >Vue3、JavaScript、HTML5、CSS3、ECharts、Axios、Vue Router
            </li>
            <li><strong>UI/组件库：</strong>ElementUI、NES.css</li>
            <li><strong>工程化：</strong>Vite、Git</li>
            <li>
              <strong>后端：</strong
              >SpringBoot、SpringCloud、MyBatisPlus、MyBatis、SpringSecurity
            </li>
            <li><strong>AI：</strong>Python、Pytorch、Langchain4j</li>
            <li><strong>数据库：</strong>Redis、MySQL、MongoDB</li>
            <li>
              <strong>中间件：</strong
              >RabbitMQ、Nacos、Sentinel、Gateway、Elasticsearch
            </li>
            <li><strong>其它：</strong>Docker、Nginx、Linux 基础、WebSocket</li>
          </ul>
        </section>
        <section class="resume-section">
          <h2>个人开发项目</h2>
          <ul>
            <li>
              <strong
                ><a
                  href="https://gitee.com/yi-mark/yi-hen-ui-component-library"
                  target="_blank"
                  rel="noopener noreferrer"
                  >Yihen Components 组件库</a
                ></strong
              >：基于 Vue3 + Vite + Nes.css
              的像素风组件库，支持多种像素风UI组件，开源并持续维护。
            </li>
            <li>
              <strong
                ><a
                  href="https://gitee.com/yi-mark/weight-record"
                  target="_blank"
                  rel="noopener noreferrer"
                  >体重记录系统</a
                > </strong
              >：SpringBoot项目，分用户保存数据，支持体重记录、体重趋势图、体重查询等功能。
            </li>
            <li>
              <strong
                ><a
                  href="https://github.com/CszYihen/Yihen-Chat"
                  target="_blank"
                  rel="noopener noreferrer"
                  >Yihen Chat单聊系统</a
                ></strong
              >：SpringBoot+WebSocket项目，前后端分离，支持单聊、历史消息回放、未读消息提醒等功能。
            </li>
            <li>
              <strong
                ><a
                  href="https://gitee.com/yi-mark/yihen-market-cloud"
                  target="_blank"
                  rel="noopener noreferrer"
                  >校园二手交易系统</a
                ></strong
              >：SpringCloud微服务项目，前后端分离，具有后台管理系统，支持发布商品、商品搜索、商品购买等功能。
            </li>

            <li>
              <strong><a href="">智能聊天记账</a> </strong
              >：Langchain4j项目，接入大模型，通过聊天方式记账、查账等功能。
            </li>

            <li>
              <strong><a href="">论文检索工具</a> </strong
              >：Python项目，可以通过标题、作者、期刊等关键字检索论文。返回相关信息以及论文下载链接。
            </li>
          </ul>
        </section>

        <section class="resume-section">
          <h2>个人荣誉</h2>
          <YihenPixelContainer
            containerIsDark="true"
            title="国家级"
            titleFontSize="1.2em"
          >
            <div style="margin: auto">
              <li>
                2021-2022 学年，获得 2022年数维杯国际大学生数学建模挑战赛F奖；
              </li>
              <li>
                2021-2022 学年，获得
                2022年第十二届亚太地区大学生数学建模竞赛三等奖；
              </li>
            </div>
          </YihenPixelContainer>
          <br />
          <YihenPixelContainer
            containerIsDark="true"
            title="省级"
            titleFontSize="1.2em"
          >
            <div style="margin: auto">
              <li>
                2021-2022 学年，获得
                第十三届蓝桥杯湖南赛区C/C++程序设计大学B组三等奖；
              </li>
              <li>
                2021-2022 学年，获得
                第十五届中国大学生计算机设计大赛人工智能挑战赛省级三等奖；
              </li>
              <li>
                2022-2023 学年，获得
                2023年全国大学生数学建模竞赛湖南赛区三等奖；
              </li>
            </div>
          </YihenPixelContainer>

          <br />
          <YihenPixelContainer
            containerIsDark="true"
            title="其他荣誉"
            titleFontSize="1.2em"
          >
            <div style="margin: auto">
              <li>2021-2022 学年，获得 国家励志奖学金；</li>
              <li>2021-2022 学年和2022-2023学年，获得 三好学生标兵；</li>
              <li>2022-2023 学年，获得 一等国家助学金；</li>
              <li>2023-2024 学年，获评 湖南省普通高等学校2023届优秀毕业生；</li>
            </div>
          </YihenPixelContainer>
        </section>
      </div>
    </YihenGlassmorphismCard>
    <YihenPixelButton @click="goto('/')" type="primary" class="fixed-back-btn">
      <
    </YihenPixelButton>
  </div>
</template>

<script setup>
import YihenGlassmorphismCard from "../components/card/Yihen-GlassmorphismCard.vue";
import YihenPixelButton from "../components/button/Yihen-PixelButton.vue";
import YihenPixelContainer from "../components/container/Yihen-PixelContainer.vue";
import YihenPixelBadge from "../components/badges/Yihen-PixelBadge.vue";
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";
const router = useRouter();
const route = useRoute(); // 获取上层路由传递的参数
const props = defineProps({
  imgs: { type: Array, default: ["/imgs/1.jpg"] },
});

const isShow = ref(false);
const imgsList = ref([]);

function goto(name) {
  //  路由跳转
  router.push({
    path: name, // 路由
  });
}
</script>

<style scoped>
.self-introduction-card {
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 1.3em;
}
.scrollable-content {
  max-height: 80vh;
  overflow-y: auto;
  padding-right: 12px;
}
/* 隐藏滚动条 */
.scrollable-content::-webkit-scrollbar {
  width: 0px;
}

.self-introduction {
  max-width: 80%;
  margin: auto;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.title {
  text-align: center;
  font-size: 2.2em;
  margin-bottom: 32px;
  color: #3a3a3a;
  letter-spacing: 2px;
}
.resume-section {
  margin-bottom: 32px;
}
.resume-section h2 {
  font-size: 1.3em;
  color: #2196f3;
  margin-bottom: 12px;
  border-left: 4px solid #2196f3;
  padding-left: 10px;
}
.resume-section ul {
  padding-left: 20px;
  margin: 0;
}
.resume-section li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 30% 30%, #5d7db3 0%, #565879 100%);
  z-index: 0;
}

.info-profile-row {
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  width: 100%;
  gap: 32px;
}
.info {
  width: 60%;
  flex: 1;
}
.avatar {
  width: 150px;
  height: 150px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 2px 8px #0002;
}
.profile-icons {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
}
a {
  color: black;
}
.fixed-back-btn {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  width: 5%;
  align-items: center;
}

.center-container {
  font-family: "Press Start 2P", "zpix";
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 让包裹层不拦截事件，若需要可去掉 */
}
.center-container > * {
  pointer-events: auto; /* 让内容可交互 */
}
</style>
